/* HTML5 */
footer, header, main, nav {
	display: block;
}

body {
	margin: 0;
	padding: 0;
	color: black;
	background: #ffc;
	font-family: Calibri,Helvetica,Arial,sans-serif;
}

code,pre {
	font-family: Consolas,"Courier New",Courier,monospace;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Cambria,"Times New Roman",Times,serif;
}

ul {
	list-style-type: square;
}

pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow: auto;
}

/* Default link style */
a:link { color:#3366CC; text-decoration:underline; }
a:visited { color:#003399; text-decoration:underline; }
a:focus { color:#3366CC; text-decoration:none; }
a:hover { color:#3366CC; text-decoration:none; }
a:active { color:#003399; text-decoration:none; }

a[name]:hover { color:black; text-decoration:none; }

#topwrap {
	margin: 0;
	padding: 0;
	color: black;
	background: #fc0;
	border-bottom: 1px solid black;
}

#wrap {
	margin: 0;
	padding: 0;
	background: white;
}

/* Header */
#head {
	overflow: hidden;
	width: 60em;
	margin: 0 auto;
	padding: 1em 0;
}
#head h1 {
	margin: 0;
	padding: 0;
	width: 266px;
	height: 50px;
	background: url(/engine/images/head.gif) no-repeat;
	text-indent: -999em;
}
#head p.tagline {
	margin: 0;
	padding: 0;
	padding-left: .5em;
	font-family: "Segoe Print","Bradley Hand",Calibri,Helvetica,Arial,sans-serif;
	font-size: x-large;
}
#head div.hgroup {
	float: left;
}
#head p.downloadlink {
	float: right;
	text-align: center;
}

/* Based on W3Schools example:
   https://www.w3schools.com/css/css_navbar.asp */
#nav {
	width: 60em;
	margin: 0 auto;
}
#nav ul {
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#nav li {
	float: left;
}
#nav li a {
	display: block;
	color: black;
	padding: .75em 1.5em;
	text-align: center;
	text-decoration: none;
}
#nav li a:hover:not(.active) {
	color: #fc0;
	background-color: dimgray;
	border-radius: .3em .3em 0 0;
}
#nav li.active a {
	color: #fc0;
	background-color: black;
	border-radius: .3em .3em 0 0;
}

/* Advertisement */
#ads {
	padding: .5em;
	text-align: center;
	background: white;
}

#content {
	width: 60em;
	margin: 0 auto;
	padding: 1em;
	background: white;
}

#content h2 {
	margin-top: 0;
}

#content h3 em,
#content h4 em {
	color: gray;
	font-size: smaller;
}

#content p {
	margin-top: 0;
}

/* Footer */
#foot {
	color: dimgray;
	background: #ffc;
	border-top: 1px solid black;
	line-height: 1.5em;
}

#foot .columns {
	width: 60em;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
}

#foot .column {
	width: 33%;
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
}
#foot .column h2 {
	margin: 0;
	padding: 0;
	padding-top: .5em;
	font-family: "Segoe Print","Bradley Hand",Calibri,Helvetica,Arial,sans-serif;
	font-size: large;
}
#foot .column ul {
	margin: 0;
	padding: .5em 0;
}
#foot .column li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#foot .column ul.languages li {
	display: inline;
	margin-right: 1em;
}
#foot em {
	font-size: smaller;
}

#foot a:link { color:dimgray; text-decoration:none; }
#foot a:visited { color:dimgray; text-decoration:none; }
#foot a:focus { color:dimgray; text-decoration:underline; }
#foot a:hover { color:dimgray; text-decoration:underline; }
#foot a:active { color:dimgray; text-decoration:none; }

/* SHA-1 Checksums */
.checksums {
	padding-left: .5em;
	border-left: .5em solid #d2d2d2;
}
.checksums dt {
	font-weight: bold;
}
.checksums dd {
	margin-left: 0;
	margin-bottom: .5em;
}
.checksums dd:last-of-type {
	margin-bottom: 0;
}

/* Heading list */
.headinglist dt {
	font-weight: bold;
}

.headinglist dd {
	margin: 0;
	margin-bottom: 1em;
	padding: 0;
}

p.important {
	padding: 5px;
	background-color: #FFDDDD;
	border: 1px solid red;
	font-weight: bold;
}

p.note {
	padding: 5px;
	background-color: #DDDDFF;
	border: 1px solid #6666FF;
}

pre.code {
	margin-left: 25px;
	margin-right: 25px;
	padding: 5px;
	background-color: #EEEEEE;
	border-left: 10px solid #CCCCCC;
}

acronym {
	cursor: help;
	border-bottom: 1px dotted black;
}

/* Inline list */
ul.inline {
	margin: 1em;
	padding: 0;
}

ul.inline li {
	margin: 0;
	margin-right: 1em;
	padding: 0;
	display: inline;
	list-style: none;
}

/* RSS feed items */
.rssfeeditems li {
	margin-bottom: .5em;
}

.rssfeeditems em {
	margin-left: .5em;
	color: gray;
	font-size: smaller;
}

/* Table */
.table {
	border-collapse: collapse;
}
.table th {
	border-bottom: 2px solid #d2d2d2;
}
.table td {
	border-bottom: 1px solid #d2d2d2;
}
.table th, .table td {
	padding: .6em;
}

.table.is-bordered {
	border: 1px solid #d2d2d2;
}
.table.is-bordered th, .table.is-bordered td {
	border: 1px solid #d2d2d2;
}

.table.is-striped th {
	background: #f2f2f2;
}
.table.is-striped tr:nth-child(odd) {
	background: #f9f9f9;
}

.table.is-narrow th, .table.is-narrow td {
	padding: .3em;
}

.table-scrollable {
	overflow-x: auto;
}

/* Translation status colors */
.translated { color: #2D802B; }
.fuzzy { color: #05359B; }
.untranslated { color: #D42323; }

/* GUI elements */
.guimenu,.guisubmenu,.guimenuitem,.guilabel {
	font-style: italic;
}

/* Text alignments */
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

/* Indented content */
.indented { margin: 1em; }

/* Button */
.button {
	display: inline-block;
	padding: .5em;
	color: #fff !important;
	background-color: #36c;
	border-radius: .3em;
	text-decoration: none !important;
	white-space: nowrap;
}
.button:hover, .button:focus {
	background-color: #039;
}
.button.is-light {
	color: #000 !important;
	background-color: #ccc;
}
.button.is-light:hover, .button.is-light:focus {
	background-color: #aaa;
}
.button.is-dark {
	color: #fff !important;
	background-color: #333;
}
.button.is-dark:hover, .button.is-dark:focus {
	background-color: #111;
}
.button.is-success {
	color: #fff !important;
	background-color: #00b300;
}
.button.is-success:hover, .button.is-success:focus {
	background-color: #060;
}
.button.is-warning {
	color: rgba(0, 0, 0, 0.7) !important;
	background-color: #fc3;
}
.button.is-warning:hover, .button.is-warning:focus {
	background-color: #ffbf00;
}
.button.is-danger {
	color: #fff !important;
	background-color: #f66;
}
.button.is-danger:hover, .button.is-danger:focus {
	background-color: #f33;
}
.button.is-small {
	font-size: small;
}
.button.is-medium {
	font-size: large;
}
.button.is-large {
	font-size: x-large;
}

/* Button list */
ul.buttons {
	padding-left: 0;
	list-style-type: none;
}
ul.buttons li {
	display: inline;
	margin-right: 1em;
}
ul.buttons li .button {
	margin-bottom: 1em
}

/* Responsive Image */
.image {
	max-width: 100%;
	height: auto;
}

/* Tag */
.tag {
	display: inline-block;
	padding: .2em .4em;
	font-size: .75em;
	vertical-align: text-top;
	color: #fff !important;
	background-color: #36c;
	border-radius: .6em;
	white-space: nowrap;
}
.tag.is-light {
	color: #000 !important;
	background-color: #ccc;
}
.tag.is-dark {
	color: #fff !important;
	background-color: #333;
}
.tag.is-success {
	color: #fff !important;
	background-color: #00b300;
}
.tag.is-warning {
	color: rgba(0, 0, 0, 0.7) !important;
	background-color: #fc3;
}
.tag.is-danger {
	color: #fff !important;
	background-color: #f66;
}

/* media queries */
@media (max-width: 60em) {
	#head, #nav, #content, #foot .columns {
		width: auto;
	}
}
@media (max-width: 40em) {
	#nav li a:hover:not(.active) {
		border-radius: .5em;
	}
	#nav li.active a {
		border-radius: .5em;
	}
	#foot .column {
		width: auto;
		float: none;
	}
}
@media (max-width: 30em) {
	#head div.hgroup, #head p.downloadlink {
		float: none;
	}
	#nav li {
		float: none;
	}
	#nav li a:hover:not(.active) {
		border-radius: 0;
	}
	#nav li.active a {
		border-radius: 0;
	}
}